<template>
    <div>
        <el-form ref="form" :rules="rules" :models="form" label-width="100px" style="width: 750px">
            <el-form-item label="封面图片" prop="vimg">
                <el-upload class="avatar-uploader" :action="`${UPLOADURL}/upload`" :show-file-list="false"
                    :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                    <img v-if="form.vimg" :src="'http://176.221.16.8:8080'+form.vimg" class="avatar" />
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            <el-form-item label="课程名" prop="title">
                <el-input style="width: 300px;" v-model="form.title"></el-input>
            </el-form-item>
            <!-- <el-form-item label="视频简介" prop="vinfo">
                <div style="border: 1px solid #ccc;width: 300px;">
                    <Toolbar style="border-bottom: 1px solid #ccc" :editor="editor" :defaultConfig="toolbarConfig"
                        :mode="mode" />
                    <Editor style="height: 200px; overflow-y: hidden" v-model="form.vinfo" :defaultConfig="editorConfig"
                        :mode="mode" @onCreated="onCreated" />
                </div>
            </el-form-item> -->
            <el-form-item label="课程时长" prop="vtime">
                <el-input style="width: 300px;" v-model="form.vtime"></el-input>
            </el-form-item>
            <el-form-item label="卡路里" prop="Kcal">
                <el-input style="width: 300px;" v-model="form.Kcal"></el-input>
            </el-form-item>
            <el-form-item label="难度" prop="exp">
                <el-radio-group style="line-height: 30px;" v-model="form.exp">
                    <el-radio label="零基础">零基础</el-radio>
                    <el-radio label="初级">初级</el-radio>
                    <el-radio label="中级">中级</el-radio>
                    <el-radio label="高级">高级</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="部位" prop="vbody">
                <el-radio-group v-model="form.vbody">
                    <el-radio label="手部">手部</el-radio>
                    <el-radio label="肩部">肩部</el-radio>
                    <el-radio label="背部">背部</el-radio>
                    <el-radio label="腰部">腰部</el-radio>
                    <el-radio label="胸部">胸部</el-radio>
                    <el-radio label="臀部">臀部</el-radio>
                    <el-radio label="腿部">腿部</el-radio>
                    <el-radio label="颈部">颈部</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="器械" prop="calorie">
                <el-radio-group v-model="form.calorie">
                    <el-radio label="无">无</el-radio>
                    <el-radio label="哑铃">哑铃</el-radio>
                    <el-radio label="弹力带">弹力带</el-radio>
                    <el-radio label="瑜伽球">瑜伽球</el-radio>
                    <el-radio label="泡沫轴">泡沫轴</el-radio>
                    <el-radio label="杠铃">杠铃</el-radio>
                    <el-radio label="跳绳">跳绳</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="分类" prop="vtype">
                <el-radio-group v-model="form.vtype">
                    <el-radio label="减脂减重">减脂减重</el-radio>
                    <el-radio label="平坦腹部">平坦腹部</el-radio>
                    <el-radio label="瘦腿">瘦腿</el-radio>
                    <el-radio label="体态">体态</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submit">更新课程信息</el-button>
                <el-button>取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import httpApi from "@/http";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";

export default {
    components: { Editor, Toolbar },

    beforeDestroy() {
        const editor = this.editor;
        if (editor == null) return;
        editor.destroy(); // 组件销毁时，及时销毁编辑器
    },

    data() {
        return {
            form: {
                video_id: this.$route.query.video_id,
                vimg: "",
                title: "",
                // vinfo: "",
                vtime: "",
                Kcal: "",
                exp: "1",
                vbody: "1",
                calorie: "1",
                vtype: "1",
            },
            rules: {
                vimg: [{ required: true, message: "必填", trigger: "blur" }],
                title: [{ required: true, message: "必填", trigger: "blur" }],
                // vinfo: [{ required: true, message: "必填", trigger: "blur" }],
                vtime: [{ required: true, message: "必填", trigger: "blur" }],
                Kcal: [{ required: true, message: "必填", trigger: "blur" }],
                exp: [{ required: true, message: "必填", trigger: "blur" }],
                vbody: [{ required: true, message: "必填", trigger: "blur" }],
                calorie: [{ required: true, message: "必填", trigger: "blur" }],
                vtype: [{ required: true, message: "必填", trigger: "blur" }],
            },
            editor: null,
            toolbarConfig: {
                toolbarKeys: ["bold", "underline", "italic", "color"],
            },
            editorConfig: { placeholder: "请输入内容..." },
            mode: "simple",
        }
    },
    mounted() {
        // 加载当前课程的详细信息
        this.queryCourseInfo();
    },
    // watch: {
    //     'form.vinfo'(newVal) {
    //         const videoIntro = newVal.replace(/^<p>(.*?)<\/p>$/, "$1");
    //         this.form.vinfo = videoIntro;
    //     }
    // },
    methods: {
        onCreated(editor) {
            this.editor = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错
        },

        // 查看当前课程的详细信息
        queryCourseInfo() {
            let video_id = this.form.video_id
            httpApi.courseApi.queryById({ video_id }).then((res) => {
                console.log('55555', res);
                this.form = res.data.data[0]
            })
        },
        // 提交修改的课程
        submit() {
            httpApi.courseApi.update(this.form).then((res) => {
                console.log('提交成功', res);
                if (res.data.code == 200) {
                    this.$message({ type: "success", message: "更新成功" });
                    this.$router.push("/home/course-list");
                } else {
                    this.$message({ type: "danger", message: "更新失败" });
                }
            })
        },

        /** 上传成功后执行 */
        handleAvatarSuccess(res, file) {
            console.log(res);
            /** 将上传成功的图片访问路径赋值给form对象的属性 */
            this.form.vimg = res.data.data
            /** 想办法将错误消息移除 */
            // this.$refs.form.clearValidate();
        },
        /** 图片上传之前执行 */
        beforeAvatarUpload(file) {
            const isJPG = file.type === "image/jpeg" || "image/png" || "image/git";
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error("上传头像图片只能是 JPG 格式!");
            }
            if (!isLt2M) {
                this.$message.error("上传头像图片大小不能超过 2MB!");
            }
            return isJPG && isLt2M;
        },
    }
}
</script>

<style src="@wangeditor/editor/dist/css/style.css"></style>
<style>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    line-height: 120px;
    text-align: center;
}

.avatar {
    height: 120px;
    display: block;
}
</style>